<template>
	<view>
		<view class="box_2">添加你掌握的语言，最多可添加6种语言</view>
		<view class="form-line u-border-bottom" @click="showPickerLanguage = !showPickerLanguage">
			<view class="form-field">
				<view class="label">
					选择语种
				</view>
				<view :class="languageName ? 'text' : 'text ac'">
					{{languageName ? languageName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-picker v-model="showPickerLanguage" :default-selector="[languageDefaultIndex]" mode="selector"
			:range="columnsLanguage" range-key="text" :default-index="languageDefaultIndex" @confirm="onConfirmLanguage"
			@cancel="showPickerLanguage = false" />
		<view class="form-line u-border-bottom" @click="showPickerLanguageLevel = !showPickerLanguageLevel">
			<view class="form-field">
				<view class="label">
					熟悉程度
				</view>
				<view :class="levelName ? 'text' : 'text ac'">
					{{levelName ? levelName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-picker v-model="showPickerLanguageLevel" :default-selector="[levelDefaultIndex]" mode="selector"
			:range="columnsLanguageLevel" range-key="text" :default-index="levelDefaultIndex"
			@confirm="onConfirmLanguageLevel" @cancel="showPickerLanguageLevel = false" />

		<view style="margin: 32rpx 32rpx 0;">
			<u-button shape="circle" :disabled="disabled" type="primary" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<view class="box_1" v-if="parseInt(id) > 0" @click="delLanguageModalState=true">
			删除此语言能力
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="delLanguageModalState" title="提示" content="确定删除该语言能力吗?" show-cancel-button
			@confirm="deleteCurrentLanguage" @cancel="delLanguageModalState=false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'EditLanguage',
		data() {
			return {
				delLanguageModalState: false,
				languageDefaultIndex: 0,
				levelDefaultIndex: 0,
				showPickerLanguage: false,
				showPickerLanguageLevel: false,
				id: 0,
				language: '',
				languageName: '',
				level: '',
				levelName: '',
				disabled: false
			}
		},
		onLoad(e) {
			// 获取路由中的id
			this.id = e.id
			if (this.id > 0) {
				// 如果有id，根据id取出对应的语言能力
				let thisLanguage = this.languageStore.filter(
					item => parseInt(item.id) === parseInt(this.id)
				)
				this.initData(thisLanguage[0])
				// 恢复所选语种
				this.languageDefaultIndex = this.columnsLanguage.findIndex(
					item => parseInt(item.id) === parseInt(this.language)
				)
				// 恢复熟悉程度
				this.levelDefaultIndex = this.columnsLanguageLevel.findIndex(
					item => parseInt(item.id) === parseInt(this.level)
				)
			}
			this.getLanguageLevel()
			this.getLanguage()
		},
		mounted() {},
		watch: {
			languageStore(val) {
				// console.log(val)
			}
		},
		computed: {
			...mapState({
				columnsLanguage: state => state.classifyLanguage,
				columnsLanguageLevel: state => state.classifyLanguageLevel,
				languageStore: state => state.resume.language_list
			})
		},
		methods: {
			async getLanguageLevel() {
				await this.$store.dispatch('getClassify', 'languageLevel')
			},
			async getLanguage() {
				await this.$store.dispatch('getClassify', 'language')
			},
			// 初始化接口返回数据
			initData(interfaceLanguage) {
				this.language = interfaceLanguage.language
				this.languageName = interfaceLanguage.language_text
				this.level = interfaceLanguage.level
				this.levelName = interfaceLanguage.level_text
			},
			// 选择语种
			onConfirmLanguage(index) {
				this.language = this.columnsLanguage[index].id
				this.languageName = this.columnsLanguage[index].text
				this.showPickerLanguage = !this.showPickerLanguage
			},
			// 选择熟悉程度
			onConfirmLanguageLevel(index) {
				this.level = this.columnsLanguageLevel[index].id
				this.levelName = this.columnsLanguageLevel[index].text
				this.showPickerLanguageLevel = !this.showPickerLanguageLevel
			},
			// 保存
			handleSubmit() {
				if (!this.language) {
					this.$refs.uTips.show({
						title: '请选择语种',
						type: 'error'
					})
					return false
				}
				if (!this.level) {
					this.$refs.uTips.show({
						title: '请选择熟悉程度',
						type: 'error'
					})
					return false
				}
				this.disabled = true
				http
					.post(api.resume_language_save, {
						id: this.id,
						language: this.language,
						level: this.level
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
						this.disabled = false
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 删除此语言能力
			deleteCurrentLanguage() {
				// 确定按钮
				http
					.post(api.resume_language_delete, {
						id: this.id
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		width: 100%;
		padding: 30rpx 0;
	}

	.box_2 {
		font-size: 26rpx;
		color: #666666;
		padding: 30rpx 32rpx;
		background-color: #f3f3f3;
	}
</style>
